<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mouse Stroke - Help</title>
<link type="text/css" rel="stylesheet" href="options.css" />
<script type="text/javascript" src="essentials.js"></script>
<script type="text/javascript" src="stroke.js"></script>
<script type="text/javascript">
/* the id of stroke command, whose stroke sequence is being setted */
var command_id = null;

/* default configuration */
var config, def_config = JSON.parse(localStorage.getItem('def_config'));

/* port to the background page */
var bpage = chrome.extension.connect({name: 'config-tunnel'});

/* convert id to a readable label */
var id2label = function(id)
{
	/* replace hyphens to spaces, then capitalize the first letter */
	return id.replace(/\-/g, ' ').replace(/\w+/g, function(s) {
		return s.charAt(0).toUpperCase() + s.substring(1);
	});
}

/* construct the config form */
var construct = function(conf)
{
	var tb = $get('stroke-tbody'), tr, td, input, button;

	/* restore options */
	$get('trigger').value = conf.trigger;
	$get('timeout').value = conf.timeout;
	$get('minstep').value = conf.minstep;

	/* restore stroke settings */
	for (key in conf.strokes) {
		tr = $create('tr');
		/* label */
		tr.appendChild($create('td', { className: 'label', innerHTML: id2label(key) }));
		/* input field */
		input = $create('input', { id: key, type: 'text', disabled: true, className: 'stroke-field', value: conf.strokes[key].join(' ') });
		/* set button */
		button = $create('button', { className: 'set-stroke-btn', 'for': key, innerHTML: 'Set Stroke' });
		button.addEventListener('click', function(e) {
			/* set the command id */
			command_id = e.target['for'];
			/* display the overlay, waiting for input */
			$show('overlay');
		}, false);
		td = $create('td', { className: 'field' });
		td.appendChild(input);
		td.appendChild(button);
		tr.appendChild(td);
		tb.appendChild(tr);
	}

	/* bind restore/save button listener */
	$get('restore').addEventListener('click', restore, false);
	$get('save').addEventListener('click', harvest, false);
}

/* save settings */
var harvest = function()
{
	var i, strokes = $get('stroke-tbody').getElementsByClassName('stroke-field');

	config.trigger = parseInt($get('trigger').value);
	config.timeout = parseInt($get('timeout').value);
	config.minstep = parseInt($get('minstep').value);

	for (i = 0; i < strokes.length; ++i) {
		config.strokes[strokes[i].id] = strokes[i].value.trim().split(' ');
	}
	/* save locally */
	localStorage.setItem('config', JSON.stringify(config));
	/* tell the background page to reload config */
	bpage.postMessage('reload');
	location.reload();
}

/* restore default settings */
var restore = function()
{
	localStorage.removeItem('config');
	bpage.postMessage('reload');
	location.reload();
}

window.addEventListener('load', function() {
	/* fallback to def_config if config from local storage is empty */
	try {
		if (!(config = JSON.parse(localStorage.getItem('config')))) {
			config = def_config;
		}
	} catch (ex) {
		console.error(ex);
		config = def_config;
	}
	construct(config);
});

/* listen to the stroke detecting script */
chrome.extension.onConnect.addListener(function(port) {
	if ('stroke-tunnel' != port.name) return;

	port.onMessage.addListener(function(strokes) {
		var k, input = $get(command_id), seq = strokes.join(' ').trim();
		/* check duplicates */
		if (input) {
			for (k in config.strokes) {
				if (command_id != k && seq == config.strokes[k].join(' ')) {
					if (confirm('Stroke "' + seq + '" conflicts with [' + id2label(k) + '], overwrite?')) {
						$get(k).value = '';
						config.strokes[k] = [];
						break;
					} else {
						return;
					}
				}
			}
			input.value = seq;
		}
		$hide('overlay');
		command_id = null;
	});
});
</script>
<body>

<div id="overlay" class="overlay hidden">
 <h1>I'm waiting for your input</h1>
</div>

<div id="root" class="root">
 <h1>Mouse Stroke (<a href="http://code.google.com/p/chrome-mouse-stroke/" target="_blank">Homepage</a>)</h1>
 <h3>Use mouse strokes to accelerate your operations</h3>
 <fieldset class="option-fieldset">
  <legend>Options</legend>
  <table id="option-table" class="option-table" cellpadding="0" cellspacing="0" border="0">
   <tbody id="option-tbody">
    <tr>
     <th colspan="2">OPTIONS</th>
    </tr>
    <tr>
     <td class="label">Trigger</td>
     <td class="field">
      <select id="trigger">
       <option value="0">Left Mouse Button</option>
       <option value="1">Middle Mouse Button</option>
       <option value="2">Right Mouse Button</option>
      </select>
     </td>
    </tr>
    <tr>
     <td class="label">Stroke Timeout (Milliseconds)</td>
     <td class="field">
      <input id="timeout" type="text"/>
     </td>
    </tr>
    <tr>
     <td class="label">Minimum Step (Pixels)</td>
     <td class="field">
      <input id="minstep" type="text"/>
     </td>
    </tr>
   </tbody>
   <tbody id="stroke-tbody">
    <tr>
     <th colspan="2">STROKES</th>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <th colspan="2">
      <button id="restore">RESTORE TO DEFAULT</button>
      <button id="save">SAVE</button>
     </th>
    </tr>
   </tbody>
  </table>
 </fieldset>
</div>
</body>
</html>